<template>
	<view>
		<view class="comment-list flex-display" v-for="(item,index) in commentList" :key="index">
			<image :src="path+item.userAvatar" mode="" class="comment-list-avatar"></image>
			<view class="comment-list-item flex-1">
				<view class="comment-list-info flex-display">
					<view class="comment-list-name flex-1">
						<text class="ellipsis-line1">{{item.userName}}</text>
						<view class="flex-display">
							<image src="../../static/images/icon-star-act.png" mode="" class="comment-list-star"
								v-for="i in item.productService" :key="item"></image>
							<image v-for="j in 5-item.productService" :key="j" src="../../static/images/icon-star-off.png" mode="" class="comment-list-star"></image>
						</view>
					</view>
					<text>{{item.createTime}}</text>
				</view>
				<view class="comment-list-content">
					<text>{{item.info}}</text>
				</view>
				<view class="flex-display">
					<image :src="commentItemImg" mode="aspectFill" class="comment-list-img"
						v-for="(commentItemImg, cindex) in item.photoList" :key="cindex"
						@click="previewImg(item.photoList,cindex)"></image>
				</view>
				<!-- <view class="comment-list-reply" v-if="isNurse">
					<text>护工回复：</text>
					<text>谢谢亲的支持，我会继续保持的谢谢亲的支持，我会继续保持的</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			commentList: {
				type: Array,
				default: []
			},
			isNurse: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
				photoList: [], // 图片s
			};
		},
		
		
		methods: {
			
			previewImg(imgs,index) {
				wx.previewImage({
					current: index, // 当前显示图片的http链接
					urls: imgs // 需要预览的图片http链接列表
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment-list {
		background: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 2rpx;
		display: flex;
	}

	.comment-list-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #999999;
		overflow: hidden;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.comment-list-info {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		display: flex;
	}
	.comment-list-item {
		flex: 1;
	}
	.comment-list-name {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 34rpx;
		margin-bottom: 16rpx;
		flex: 1;
	}

	.comment-list-star {
		width: 22rpx;
		height: 20rpx;
		margin-right: 6rpx;
		margin-top: 4rpx;
	}

	.comment-list-content {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
		flex-shrink: unset;
		margin-bottom: 24rpx;
	}

	.comment-list-img {
		width: 112rpx;
		height: 112rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.comment-list-reply {
		background: #F4F6FA;
		padding: 22rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
	}
</style>